<template>
	<div class="tinymce-editor">
		<Editor :id="tinymceId" :init="init" :disabled="disabled" v-model="myValue"></Editor>
	</div>
</template>
<script>
  import axios from 'axios'
	import tinymce from 'tinymce/tinymce' //tinymce默认hidden，不引入不显示
	import Editor from '@tinymce/tinymce-vue' //编辑器引入
	import 'tinymce/themes/silver/theme' //编辑器主题
	import 'tinymce/icons/default'
	import 'tinymce/plugins/advlist'
	import 'tinymce/plugins/autolink'
	import 'tinymce/plugins/link'
	import 'tinymce/plugins/code'
	import 'tinymce/plugins/image'
	import 'tinymce/plugins/media'
	import 'tinymce/plugins/table'
	import 'tinymce/plugins/charmap'
	import 'tinymce/plugins/lists'
	import 'tinymce/plugins/print'
	import 'tinymce/plugins/preview'
	import 'tinymce/plugins/contextmenu'
	import 'tinymce/plugins/wordcount'
	import 'tinymce/plugins/textcolor'
	import 'tinymce/plugins/autoresize'
	export default {
		components: {
			Editor
		},
		props: {
			//内容
			value: {
				type: String,
				default: ''
			},
			//是否禁用
			disabled: {
				type: Boolean,
				default: false
			},
			triggerChange: {
				type: Boolean,
				default: false,
				required: false
			},
		},
		data() {
			return {
				//初始化配置
				tinymceId: 'tinymce',
				myValue: this.value,
				mytinymce: tinymce,
				init: {
					selector: '#tinymce',
					language_url: require('@/assets/js/zh_CN.js'), //汉化路径是自定义的，一般放在public或static里面
					language: 'zh_CN',
					skin_url: '/tinymce/skins/ui/oxide',
					content_css: `/tinymce/skins/content/default/content.css`,
					plugins: 'media autoresize advlist autolink link image lists charmap print preview wordcount', //插件
					//工具栏
					menubar: true, //隐藏菜单栏
					toolbar: 'link | undo redo |  formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat', //字体大小
					height: 500, //高度
					placeholder: '在这里输入文字',
					branding: false, //隐藏右下角技术支持
					paste_preprocess: function(plugin, args) {
						console.log(args.content);
					},
          relative_urls : false,
          convert_urls : false,
          autoresize_bottom_margin: 50,
          autoresize_max_height: 1000, // 编辑区域的最大高
          autoresize_min_height: 350, //编辑区域的最小高度
          autoresize_on_init: true,
          autoresize_overflow_padding: 50,
          end_container_on_empty_block: true,
          //图片上传
					images_upload_handler: function(blobInfo, success, failure) {
						//文件上传的formData传递
						let formData = new FormData();
						formData.append('file', blobInfo.blob(), blobInfo.filename());
						//上传的api,和后端配合，返回的是图片的地址，然后加上公共的图片前缀
            let url = process.env.VUE_APP_HOST+"/guard/article/uploadImg"
            axios.post(url,formData,{headers: {'Content-Type': 'multipart/form-data'}}).then(res=>{
              //console.log(res,res.data,res.data.data[0].url)
              let url = res.data.data[0].url
              success(url)
            })


						/*that.$api.system.uploadImage(formData).then(res=>{
						    var url = Global.baseUrlImg + res;
						    console.log(url)
						    success(url)//传入富文本
						}).catch(res => {
						    failure('图片上传失败')
						});*/
					},
					paste_as_text: true,
					//init_instance_callback为回调配置项
					init_instance_callback: (editor) => {
						// // console.log(`回调----`)
						// editor.on('input', e => {
						// 	// console.log('文本框input触发')
						// 	this.$emit('input', e.target.innerHTML)
						// });
						// editor.on('change', e => {
						// 	// console.log('文本框change触发')
						// 	this.$emit('change', e.level.content)
						// })
					},

          file_picker_callback: function(callback, value, meta) {

            //文件分类
            var filetype='.pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3, .mp4';
            //后端接收上传文件的地址
            var upurl= process.env.VUE_APP_HOST+'/guard/article/uploadVideo' ;
            //为不同插件指定文件类型及后端地址
            /*switch(meta.filetype){
              case 'image':
                filetype='.jpg, .jpeg, .png, .gif';
                upurl='upimg.php';
                break;
              case 'media':
                filetype='.mp3, .mp4';
                upurl='upfile.php';
                break;
              case 'file':
              default:
            }*/

            //模拟出一个input用于添加本地文件
            var input = document.createElement('input');
            input.setAttribute('type', 'file');
            input.setAttribute('accept', filetype);
            input.click();
            input.onchange = function() {
              var file = this.files[0];

               let formData = new FormData();
              formData.append('file', file, file.name );
              axios.post(upurl,formData,{headers: {'Content-Type': 'multipart/form-data'}})
                .then(res=>{
                console.log(res)
                let url = res.data.data.url
                  callback(url,{ text: file.name,title:file.name })
                  })
            }
          },

				}
			}
		},
		watch: {
			myValue(newValue) {
				this.$emit('input', newValue)
			},
			value(newValue) {
				this.myValue = newValue
			}
		},
		mounted() {
			tinymce.init({})

		},
		methods: {}
	}
</script>
<style>
	/* 没有申请key的话会出现一个弹窗要去申请key,在这里把那个弹窗隐藏，当然也可以自己申请key再使用 */
	.tox-notifications-container {
		display: none;
	}

	/* 在页面正常使用时不用加这个样式，在弹窗使用时，要加这个样式，因为使用弹窗，z-index层数比较低，工具栏的一些工具不能使用，要将z-index层数提高。 */
	.tox-tinymce-aux {
		z-index: 5000 !important;
	}
</style>
